zustand 로 전역 상태 관리하기

특징

  • useState처럼 사용 가능

준비사항

  1. store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기
  2. 컴포넌트에 바인딩해서 사용

1. store 파일 생성 후 store 만들기 + 관리할 상태 + 상태 변경 함수 만들기

import create from 'zustand';

const useStore = create((set) => ({
  // <--- set으로 상태 변경
  data: '', // <---- 관리할 상태

  setData(newData) {
    // <---- 상태 변경 함수
    set((state) => {
      data: newData;
    });
  },

  async getAndSetData(URL) {
    // <--- thunk 같은거 필요 없이 비동기 함수도 사용 가능
    const response = await fetch(URL);
    set(((state) => data: response.data.name));
  },
}));

// 다른 state를 관리하려면 새로운 store 생성
const useStore2 = create((set) => ({
  count: 1,

  increment() {
    set((state) => {
      count: count + 1;
    });
  },
}));

2. 컴포넌트에 바인딩해서 사용

import { useStore, useStore2 } from './store.js';

const { data, setData, getAndSetData } = useStore();
const { count, increment } = useStore2();